<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Cobra Snake</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://enormousbrain.com/clients/thecobrasnake.com/js/functions.js"></script>
<script src="http://enormousbrain.com/clients/thecobrasnake.com/js/jquery.lazyload.mini.js" type="text/javascript"></script>
<style type="text/css">
body,td,th {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 10px;
	color: #999;
}
body {
	background-color: #000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#mainContainer{
	text-align:center;
	display: block;
}
#headerContainer { position: fixed; top:0px; left:0px; background-color: black; height:auto; width:100%; text-align: center;}
#cityFilterContainer { position: fixed; top:500px; left:50%; margin-left: 500px; background-color: black; height:auto; width:300px;}

#mainListContainer { width: 1000px; display: block; position: absolute; top:300px; left:50%; margin-left: -500px; text-align: center;}
#galleryList, #cityList, #thumbList { list-style: none; margin: 0; padding: 0; border: none; }
#galleryList li{ float: left; margin-left: 68px; margin-top: 100px;}
#thumbList {width:680px; position: absolute; left: 50%; margin-left: -340px;}
#thumbList li{ float: left; border: 1px solid #ffffff; width:223px; height:155px; margin: 0px; text-align: left;}
#thumbList li img{ margin-top: 11px; margin-left: 11px;}
#cityList li{ margin-bottom:-3px; text-align: center; width: 300px;}
.photoThumb { cursor: pointer;}
/* 		HEADER	 */
			
			#headerContainer 
			{ 
				position: relative;
				position: fixed; top:0px; left:0px; background-color: black; height:auto; width:100%; text-align: center;
			}
			
			#headerMenu		    
		    {
		    	height: 100px;
		    	width: 473px;
		    	background:  url('http://enormousbrain.com/clients/thecobrasnake.com/img/headerBG.jpg') no-repeat 0 center;
		    	
		    	position: relative;
		    	left: 50%;
		    	margin-left: -236px;
		    	margin-top: 30px;
		    }
		    #theCobraSnakeLogo
		    {
		    	margin-top: 60px;
		    }
		    .navButtons
		    {
		    	list-style: none;
		    	margin: 0;
		    	padding: 0;
		    }
		    
		    .navButtons li
		    {
		    	width: 166px;
		    	height: 100px;
		    	float: left;
		    }

			.navButtons li img
		    {
		    	margin-top: 40px;
		    } 
		    
		    .navButtons li:nth-child(3) 
		    {
		    	width: 140px;
			}
			
			
		    .navButtons li:nth-child(4) 
		    {
		    	width: 144px;
		    	text-align: center;
			}
			
			.navButtons li:nth-child(4) img:nth-child(1)
		    {
		    	margin-top: 20px;
			}
			.navButtons li:nth-child(4) img:nth-child(2)
		    {
		    	margin-top: 0px;
			}
			
			.search_input
		    {
		    	margin-top: 38px;
		    	width:85px;  
		        padding:8px;  
		        outline:none;  
		        height:18px;
		        font-size: 16px;
		        font-weight: bold;
				border: solid 3px #ff0000; 	
		    }
/* /HEADER  */
</style>
</head>

<body>
<?php
// include common header

// pagination
// show grid of gallery thumbs
// show category navigation
?>
<div id="mainContainer">
    <div id="mainListContainer"></div>
    <div id="headerContainer">
		<a href="http://thecobrasnake.com/" target="_self"><img id="theCobraSnakeLogo" src="http://enormousbrain.com/clients/thecobrasnake.com/pngfont.php?bgcolor=000000&color=fffb00&size=28&font=fonts/TCS2.ttf&text=THE COBRA SNAKE " alt="THE COBRA SNAKE" border="0"></a>
		<div id="headerMenu">
			<ul class="navButtons">
				<li><a href="http://thecobrasnake.com/" target="_self"><img src="http://enormousbrain.com/clients/thecobrasnake.com/pngfont.php?bgcolor=f6f9fd&color=ff0000&size=11&font=fonts/TCS2.ttf&text=PHOTOS " alt="THE COBRA SNAKE" border="0"></a></li>
				<li><a href="http://shop.thecobrasnake.com/collections/cool-stuff" target="_self"><img src="http://enormousbrain.com/clients/thecobrasnake.com/pngfont.php?bgcolor=f6f9fd&color=7dfc7d&size=11&font=fonts/TCS2.ttf&text=STORE " alt="THE COBRA SNAKE" border="0"></a></li>
				<li><a href="#" target="_self"><img class="search_label" src="http://enormousbrain.com/clients/thecobrasnake.com/pngfont.php?bgcolor=f6f9fd&color=c0c0c0&size=11&font=fonts/TCS2.ttf&text=SEARCH " alt="THE COBRA SNAKE" border="0"></a><input type="text" class="search_input"></input></li>
			</ul>
		</div>
	</div>
    <div id="cityFilterContainer"></div>
</div>
<script type="text/javascript">
	var galleryId = "<?php  echo $_REQUEST['id']; ?>";
	var galleryName = "<?php  echo $_REQUEST['name']; ?>";
	
	var searchTerm = "<?php  echo $_REQUEST['search']; ?>";
	
	$(document).ready(function() {
		
		$("img").lazyload({ threshold : 10 });
		
		webservice.functionPath = "http://enormousbrain.com/clients/thecobrasnake.com/functions.php";
		
		if( searchTerm != "" )
		{
			webservice.photos.getGalleryThumbsWithSearch( searchTerm,  function(galleriesJSON){
		  		if(galleriesJSON)
		  		{
		  			$("#mainListContainer").append( $("<ul id='thumbList' />") );
		  			var jList = $("#thumbList");
		  			var count= 0;
		  			var htmlStr = "";
					htmlStr += '<img src="pngfont.php?bgcolor=000000&color=ffffff&size=10&font=fonts/TCS2.ttf&text=' + searchTerm.toUpperCase() + ' " border="0" />';
					jList.append( $("<li style='width:670px;text-align:center;border:none'>" + htmlStr + "</li>") );
						
		      		$.each(galleriesJSON, function(intIndex, objValue)
					{
						count++;
						var htmlStr = "";
						htmlStr += '<img src="http://enormousbrain.com/clients/thecobrasnake.com/timthumb.php?src=photographs/' + objValue.url + '.JPG&w=200&h=133" border="0" />';
						jList.append( $("<li class='photoThumb' rel='" + objValue.id + "'>" + htmlStr + "</li>") );
					});
					
					if( count == 0 )
					{
						var htmlStr = "";
						htmlStr += '<img src="pngfont.php?bgcolor=000000&color=ff0000&size=10&font=fonts/TCS2.ttf&text=NO RESULTS FOR " alt="THE COBRA SNAKE" border="0">';
						htmlStr += '<img src="pngfont.php?bgcolor=000000&color=ffffff&size=10&font=fonts/TCS2.ttf&text=' + searchTerm.toUpperCase() + ' " border="0" />';
						jList.append( $("<li style='width:670px;text-align:center;border:none'>" + htmlStr + "</li>") );
						
					}
		  		}
		  	});

		}else
		{
			webservice.photos.getGalleryThumbsFor( galleryId,  function(galleriesJSON){
		  		if(galleriesJSON)
		  		{
		  			$("#mainListContainer").append( $("<ul id='thumbList' />") );
		  			var jList = $("#thumbList");
		      		$.each(galleriesJSON, function(intIndex, objValue)
					{
						var htmlStr = "";
						htmlStr += '<img src="http://enormousbrain.com/clients/thecobrasnake.com/timthumb.php?src=photographs/' + objValue.url + '.JPG&w=200&h=133" border="0" />';
						jList.append( $("<li class='photoThumb' rel='" + objValue.id + "'>" + htmlStr + "</li>") );
					});
		  		}
		  	});

		}
		
	  	
	  	$(".photoThumb").live('click', function(){
	  		
	  		if(searchTerm == "")
	  		{
	  			window.location = "http://enormousbrain.com/clients/thecobrasnake.com/"+galleryName+"/detail/"+$(this).attr('rel')+".html";

	  		}else
	  		{
	  			window.location = "http://enormousbrain.com/clients/thecobrasnake.com/search:"+searchTerm+"/detail/"+$(this).attr('rel')+".html";
	  		}
	  			  		
	  	});
	  	
	  	$('.search_input').hide();
		$('.search_input').val("");
		$('.search_label').click( function(){
			$('.search_label').hide();
			$('.search_input').show();
		});
		$('.search_input').change(function(){
			window.location="http://enormousbrain.com/clients/thecobrasnake.com/gallery.php?search="+$(this).val();
		});

	});
</script>
</body>
</html>